<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading" class="baseinfo" v-cloak>
        <div style="display: flex;flex-direction: row-reverse;">
            <el-button type="primary" size="small" @click="submitHandle" icon="el-icon-check">{{
                    btnText
                }}</el-button>
        </div>
        <el-form :model="post" label-position="right" :rules="rules" label-width="120px" size="mini" v-loading="loading" style="min-height: 520px;">

            <el-form-item label="开启闪屏">
                <el-switch v-model="post.flash_enable">
                </el-switch>
            </el-form-item>

            <el-form-item label="闪屏图片" v-if="post.flash_enable">
                <image-picker width="300" height="520" v-model="post.flash_image"></image-picker>
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    最佳图片尺寸 宽度750，高度1300 或同比例
                </div>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import {
    updatePost,
    getPostDetail,
} from "@/api/post";
import MetaEditor from "@/components/MetaEditor";
import ImagePicker from "@/components/ImagePicker";
import UserSelector from "@/components/UserSelector";
import RangeInput from "@/components/RangeInput";
import FitmentSelector from "@/components/FitmentSelector";
import CityDistrictSelector from "@/components/CityDistrictSelector";

export default {
    components: {
        UserSelector,
        ImagePicker,
        MetaEditor,
        RangeInput,
        CityDistrictSelector,
        FitmentSelector,
    },
    data () {
        return {
            rules: {},
            post: {},
            mapTabs: [],
            tagsItems: [],
            catsItems: [],
            SaleStatusItems: [],
            loading: false,
            tagsLoading: true,
            catsLoading: true,
            FitmentSelector,
            saleStatusLoading: true,
            predefineColors: [
                '#3A6BDD',
                '#30DFBB',
                '#0A4324',
                '#de2525',
                '#F0FFFF',
                '#035781',
                '#5D7599',
                '#7EC384',
                '#93D5DC',
                '#E4D5E3',
                '#E1AB7D'
            ]
        };
    },
    props: {
        postId: { type: Number },
    },

    watch: {
        postId: {
            immediate: true,
            deep: true,
            handler (val, oval) {
                if (!val) {
                    return false;
                }
                this.loadPost();
            },
        },
    },

    mounted: function () {
    },

    computed: {
        btnText: function () {
            return this.postId ? "保存" : "保存，并进入下一步";
        },
    },

    methods: {

        validate: function () {
            var p = this.post;
            if (!p.title || p.title.length < 1) {
                return [false, "请填写项目名称"];
            }

            if (!p.sale_status_item_id) {
                return [false, "请选择销售状态"];
            }

            if (!p.fitment_id) {
                return [false, "请选择地块类型"];
            }

            if (!p.district_id) {
                return [false, "请选择项目所在区域"];
            }

            if (!p.tag_ids || p.tag_ids.length == 0) {
                return [false, "请至少选择一个卖点标签"];
            }

            if (!p.cat_ids || p.cat_ids.length == 0) {
                return [false, "请选择物业类型"];
            }

            if (!p.cover || p.cover.length == 0) {
                return [false, "请上传封面配图"];
            }

            if (!p.unknow_area) {
                if (!p.area_min || !p.area_max) {
                    return [false, "请填写建筑面积范围"];
                }
            }

            if (!p.unknow_price) {
                if (!p.average_price) {
                    return [false, "请填写参考均价"];
                }
            }

            if (!p.unknow_total_price) {
                if (!p.total_price_min || !p.total_price_max) {
                    return [false, "总价范围"];
                }
            }

            //if (!p.user_id) {
            //  return [false, "请选择一个信息维护人"];
            //}

            if (!p.cover) {
                return [false, "请上传项目封面图片"];
            }

            return [true, "ok"];
        },

        submitHandle: function () {
            var _res = this.validate();
            var isOk = _res[0],
                err = _res[1];
            if (!isOk) {
                this.$message.error(err);
                return false;
            }
            var data = JSON.parse(JSON.stringify(this.post));
            data.map_tabs = this.mapTabs.join(',')




            this.loading = true;
            // 删除images相关的字段，防止保存的时候被覆盖
            updatePost(data).then((resp) => {
                this.loading = false;
                if (resp.status === 0) {
                    // this.post = resp.data
                    this.$emit("change", resp.data);
                    this.$message({ type: "success", message: "保存成功" });
                    this.loadPost();
                }
            }).catch((err) => {
                this.loading = false
                console.log(err);
            });
        },

        loadPost: function () {
            this.loading = true;
            getPostDetail(this.postId).then((resp) => {
                this.loading = false;
                var post = resp.data;
                post.latitude = post.latitude ? parseFloat(post.latitude) : null;
                post.longitude = post.longitude ? parseFloat(post.longitude) : null;
                this.post = post;
                if (post.map_tabs) {
                    this.mapTabs = post.map_tabs.split(',')
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
